<template>
<div>
 <!-- 轮播图区域 -->
<swiper :lunbotuList="lunbotuList"></swiper>
<!-- 九宫格区域 -->
 <ul class="mui-table-view mui-grid-view mui-grid-9">
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="home/newsList">
            <img src="../../images/menu1.png" alt="">
            <div class="mui-media-body">新闻资讯</div></router-link></li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="home/photosList">
            <img src="../../images/menu2.png" alt="">
            <div class="mui-media-body">图片分享</div></router-link></li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodsList">
            <img src="../../images/menu3.png" alt="">
            <div class="mui-media-body">商品列表</div></router-link></li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
            <img src="../../images/menu4.png" alt="">
            <div class="mui-media-body">location</div></router-link></li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
            <img src="../../images/menu5.png" alt="">
            <div class="mui-media-body">Search</div></router-link></li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
            <img src="../../images/menu6.png" alt="">
            <div class="mui-media-body">Phone</div></router-link></li>
            
            
    
</ul> 
</div>
</template>
<script>
import swiper from '../subcomponents/swiper';
    export default {
  data() {
    return {
      lunbotuList: [] // 保存轮播图的数组
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
     getLunbotu() {
      // 获取轮播图数据的方法
      this.$http.get("api/getlunbo").then(result => {
        // console.log(result.body);
        if (result.body.status === 0) {
          // 成功了
          this.lunbotuList = result.body.message;
        } else {
          // 失败的
          Toast("加载轮播图失败。。。");
        }
      });
    }
  },
  components:{
    swiper
  }
};
</script>
<style lang="scss"  scoped>

.mui-grid-view.mui-grid-9{
        background-color: white;
        border: none;
        img{
         width: 60px;
         height: 60px;
        }
}
</style>
